import { MouseEventHandler } from "react";

export interface MenuIconProps {
  active?: boolean;
  onClick?: MouseEventHandler<HTMLDivElement> | undefined;
}

const MenuIcon: React.FC<MenuIconProps> = ({ active, onClick }) => {
  const baseLineStyle =
    "h-[4px] w-full roundered-[2px] block bg-[#fff] absolute transition-all duration-300 ease-in-out";
  return (
    <div
      className="w-[32px] h-[32px]  relative cursor-pointer"
      onClick={onClick}
    >
      <span
        className={`${baseLineStyle} top-0 ${
          active ? "top-[8px] rotate-[405deg]" : ""
        }`}
      ></span>
      <span
        className={`${baseLineStyle} top-[10px] ${active ? "opacity-0" : ""}`}
      ></span>
      <span
        className={`${baseLineStyle} top-[20px] ${
          active ? "top-[10px] rotate-[-405deg] translate-y-[-12px]" : ""
        }`}
      ></span>
    </div>
  );
};

export default MenuIcon;
